<template>
  <div class="app_container1">
    <div class="search_container">
      <div v-if="dynamicTags && temp_dynamicTags.length> 0" class="select_option">
        筛选条件 <span v-for="(tag,index) in temp_dynamicTags" :key="index" class="_option">{{ tag }}</span>
        <el-button style="margin-left:16px" type="primary" size="small" @click="handleClear">清空</el-button>
      </div>
      <el-input
        v-else
        v-model="queryParams.search"
        placeholder="请输入客户名称/手机号/归属人"
        style="width:320px"
        size="small"
        suffix-icon="el-icon-search"
        clearable
        @clear="getList"
        @keyup.enter.native="getList"
      >
      </el-input>
      <div class="btns">
        <el-button v-has-permi="[categoryPermi['add']]" type="primary" size="small" @click="handleAdd">添加</el-button>
        <el-button v-if="list_type==='allcus'" v-hasPermi="[categoryPermi['auto_distri']]" type="info" size="small" @click.native="handleAutoDistribution">自动分配</el-button>
        <el-button v-if="list_type==='allcus'" v-hasPermi="[categoryPermi['import_customer']]" type="info" size="small" @click.native="handleImport">导入</el-button>
        <el-button v-hasPermi="[categoryPermi['export']]" type="info" size="small" @click.native="handleAllExport">全部导出</el-button>
        <el-button v-if="category === 'IC'" v-hasPermi="[categoryPermi['change_category']]" size="small" type="info" :disabled="isDisabled" @click.native="subChange('SC')">转为签约</el-button>
        <el-button v-if="category === 'HSC' || category === 'CC' " v-hasPermi="[categoryPermi['change_category']]" size="small" type="info" :disabled="isDisabled" @click.native="subChange('IC')">转为意向</el-button>
        <el-button v-if="category === 'IC' || category === 'CC'" v-hasPermi="[categoryPermi['change_category']]" size="small" type="info" :disabled="isDisabled" @click.native="subChange('HSC')">放入公海</el-button>
        <el-button v-if="category !== 'HSC'" v-hasPermi="[categoryPermi['change_owner']]" size="small" type="info" :disabled="isDisabled" @click="changeOwser">转移归属人</el-button>
        <el-tooltip class="item" effect="light" content="刷新" placement="top-start">
          <el-button type="primary" icon="el-icon-refresh" size="small" @click="handleClear"></el-button>
        </el-tooltip>
        <el-button type="text" size="small" icon="el-icon-grape" @click="handleSearch">高级搜索</el-button>
      </div>
    </div>
    <div class="tableBox">
      <el-table v-loading="loading" border :data="postList" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="关注" width="50" align="center">
          <template slot-scope="{row}">
            <svg-icon
              style="cursor: pointer; font-size: 22px;"
              :icon-class="row.is_focused ? 's_star' : 'k_star'"
              @click="clickFocuesd(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="120" :show-overflow-tooltip="true" prop="name">
          <template slot-scope="{row}">
            <span style="color:#623edfcursor: pointer; " @click="findDetail(row)">{{ row.name }}</span>
            <i style="margin-left:8px;color:#623edfcursor: pointer;" class="el-icon-edit" @click="singeEdit(row,'姓名')" />
          </template>
        </el-table-column>
        <el-table-column v-if="category !== 'CC'" label="客户状态" width="90" prop="status_display">
          <template slot-scope="{row}">
            <div style="width:90px;cursor: pointer;" @dblclick="singeEdit(row,'客户状态')">{{ row.status_display || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" width="130" prop="phone">
          <template slot-scope="scope">
            <span style="cursor: pointer;">
              <svg-icon icon-class="mobile" class="mobile" @click="handleCall(scope.row)" />
              <span @dblclick="singeEdit(scope.row,'手机号码')">{{ scope.row.phone }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="客户类型" width="90" prop="type">
          <template slot-scope="{row}">
            <div>{{ row.type || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="客户级别" width="100px" prop="star">
          <template slot-scope="{row}">
            <span style="cursor: pointer;" @dblclick="singeEdit(row,'客户级别')">{{ row.star || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="意向金额(万元)" width="110" prop="required_load_amount">
          <template slot-scope="{row}">
            <div style="cursor: pointer;" @dblclick="singeEdit(row,'意向金额')">{{ row.required_load_amount || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="客户归属人" width="100">
          <template slot-scope="{row}">
            <div style="cursor: pointer;" @dblclick="singeEdit(row,'客户归属人')">{{ row.owner_username || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="线索名称" width="100">
          <template slot-scope="{row}">
            <div>{{ row.clue_name || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column v-if="list_type==='allcus' || list_type ==='todayusecus'" label="归档状态" width="100">
          <template slot-scope="{row}">
            <div>{{ row.is_archived ? '是':'否' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" prop="memo" min-width="310">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.memo" class="item" effect="light" :content="scope.row.memo" placement="top-start">
              <div class="follow_log" style="cursor: pointer;" @dblclick="singeEdit(scope.row,'备注')">
                {{ scope.row.memo || '-' }}
              </div>
            </el-tooltip>
            <div v-else style="cursor: pointer;" @dblclick="singeEdit(scope.row,'备注')">  {{ '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="跟进记录" align="left" prop="recent_follow_log" min-width="310">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.recent_follow_log " class="item" effect="light" :content="scope.row.recent_follow_log" placement="top-start">
              <div class="follow_log">
                {{ scope.row.recent_follow_log || '-' }}
              </div>
            </el-tooltip>
            <span v-else>  {{ '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下次联系时间" align="left" prop="next_follow_datetime" width="180">
          <template slot-scope="scope">
            <div style="cursor: pointer;" @dblclick="singeEdit(scope.row,'下次联系时间')">{{ parseTime(scope.row.next_follow_datetime ) || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="最后跟进时间" align="left" prop="update_datetime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.update_datetime) || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button v-hasPermi="[categoryPermi['edit']]" size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-hasPermi="[categoryPermi['delete']]" size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
            <el-button v-hasPermi="[categoryPermi['blacklist']]" size="mini" type="text" @click="handleBlock(scope.row)">拉黑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- c查看详情 -->
    <findDetail ref="findDetail" :category="category" />
    <!--删除  -->
    <el-dialog
      title="删除客户"
      :visible.sync="dialogDelVisible"
      width="450px"
      @close="closeEvent"
    >
      <div class="del_style">
        <div style="margin: 0 0 32px 0;"> 是否确定删除客户 ?</div>
        <el-checkbox v-model="forced">彻底删除</el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subDelete">确 定</el-button>
        <el-button @click="dialogDelVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 高级搜索 -->
    <el-dialog
      title="自定义搜索条件"
      class="search_high"
      :show-close="false"
      :visible.sync="dialogSearch"
      width="720px"
    >
      <span class="close_style" @click="clearSelect">X</span>
      <el-form
        ref="editForm"
        :model="temp"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <div class="search_title">搜索字段</div>
        <el-form-item>
          <el-select v-model="searchValue" style="width: 330px;" placeholder="请选择筛选的字段名" @change="handleSelectType">
            <el-option
              v-for="item in searchOptions"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchValue === ''">
          <el-input v-model="queryParams.status" style="width:330px" placeholder="根据搜索字段选择条件" />
        </el-form-item>
        <el-form-item v-if="searchValue === '客户状态'">
          <el-select
            v-model="queryParams.status"
            placeholder="客户状态"
            clearable
            style="width: 330px;"
            size="small"
            @change="selectCondition"
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchValue === '客户级别'" prop="status">
          <el-select
            v-model="queryParams.star"
            style="width: 330px;"
            placeholder="客户级别"
            clearable
            size="small"
            @change="selectCondition"
          >
            <el-option value="优先客户"> </el-option>
            <el-option value="普通客户"> </el-option>
            <el-option value="非优先客户"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchValue === '跟进时间'">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            align="right"
            size="small"
            style="width:330px"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="selectCondition"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="searchValue === '职业'">
          <el-select
            v-model="queryParams.profession_category"
            placeholder="职业"
            clearable
            style="width: 330px;"
            size="small"
            @change="selectCondition"
          >
            <el-option
              v-for="dict in professionList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchValue === '所属行业'">
          <el-select
            v-model="queryParams.industry"
            placeholder="所属行业"
            clearable
            style="width: 330px;"
            size="small"
            @change="selectCondition"
          >
            <el-option
              v-for="dict in industryList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchValue === '婚姻状况'">
          <el-select
            v-model="queryParams.marital_status"
            placeholder="婚姻状况"
            clearable
            size="small"
            style="width: 330px;"
            @change="selectCondition"
          >
            <el-option
              v-for="dict in ldlist"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchValue === '发薪方式'">
          <el-select
            v-model="queryParams.pay_method"
            placeholder="发薪方式"
            clearable
            style="width: 330px;"
            size="small"
            @change="selectCondition"
          >
            <el-option
              v-for="dict in payList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <div class="search_title">筛选条件</div>
        <el-form-item>
          <div class="selection_conditions">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subSearch">确 定</el-button>
        <el-button @click="()=>{ clearSelect(); handleClear() }">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加客户 -->
    <el-dialog
      :title="dialogTitle? '添加客户' : '编辑客户' "
      :visible.sync="dialogVisible"
      width="620px"
      class="add_style"
      @close="closeEvent"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-width="100px"
        size="small"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="temp.phone" />
        </el-form-item>
        <el-form-item label="客户类型" prop="type">
          <el-radio-group v-model="temp.type">
            <el-radio label="个人客户">个人客户</el-radio>
            <el-radio label="企业客户">企业客户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="客户来源">
          <el-select v-model="temp.source" style="width:100%" size="small" placeholder="请选择">
            <el-option
              v-for="dict in sourceList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户级别">
          <el-radio-group v-model="temp.star">
            <el-radio label="优先客户">优先客户</el-radio>
            <el-radio label="普通客户">普通客户</el-radio>
            <el-radio label="非优先客户">非优先客户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="意向金额">
          <el-input
            v-model="temp.required_load_amount"
            maxlength="4"
            style="width: 50%;"
            @keyup.native="temp.required_load_amount=temp.required_load_amount.replace(/[^\d.]/g,'')"
          >
            <template slot="append">万元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="下次联系时间">
          <el-date-picker
            v-model="temp.next_follow_datetime"
            type="datetime"
            style="width:100%"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注详情">
          <el-input v-model="temp.memo" :rows="2" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <span class="fl" style="font-size:14px; color:#606266"><el-checkbox v-model="temp.is_focused"></el-checkbox> 重点关注</span>
        <el-button type="primary" @click="sumbit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 双击编辑 -->
    <el-dialog
      :title="`编辑${column}`"
      :visible.sync="dialogTypeVisible"
      width="450px"
      @close="closeEvent"
    >
      <el-input v-if="column === '姓名'" v-model="temp.name" placeholder="请输入内容"></el-input>
      <el-select
        v-if="column === '客户状态'"
        v-model="temp.status"
        placeholder="客户状态"
        style="width:100%"
        size="small"
      >
        <el-option
          v-for="dict in statusOptions"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
      </el-select>
      <el-input v-if="column === '手机号码'" v-model="temp.phone" placeholder="请输入内容" @keyup.native="temp.phone=temp.phone.replace(/[^0-9]/g,'')"></el-input>
      <el-select
        v-if="column === '客户级别'"
        v-model="temp.star"
        style="width: 100%;"
        placeholder="客户级别"
        size="mini"
      >
        <el-option value="优先客户"> </el-option>
        <el-option value="普通客户"> </el-option>
        <el-option value="非优先客户"></el-option>
      </el-select>
      <el-input v-if="column === '意向金额'" v-model="temp.required_load_amount" placeholder="请输入内容"></el-input>
      <el-autocomplete
        v-if="column === '客户归属人' "
        v-model="form.owner"
        style="width:100%"
        clearable
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
      />
      <el-input v-if="column === '备注'" v-model="temp.memo" :rows="10" type="textarea" />
      <el-date-picker
        v-if="column === '下次联系时间'"
        v-model="temp.next_follow_datetime "
        type="datetime"
        style="width:100%"
        placeholder="选择日期时间"
      >
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subtransSea">确 定</el-button>
        <el-button @click="dialogTypeVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加更进记录 -->
    <el-dialog
      title="添加更进记录"
      :visible.sync="dialogLogVisible"
      width="620px"
      @close="closeEvent"
    >
      <div class="follow_style">
        <el-date-picker
          v-model="loglist.next_follow_datetime"
          type="datetime"
          size="mini"
          style="width:220px"
          placeholder="下次联系时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        <el-input v-model="loglist.content" type="textarea" rows="5" placeholder="请输入回访内容" />
      </div>
      <span slot="footer" class="dialog-footer">
        <span class="fl" style="font-size:14px; color:#606266"><el-checkbox v-model="loglist.is_archived"></el-checkbox> 归档</span>
        <span class="fl" style="font-size:14px; color:#606266; margin-left:24px"><el-checkbox v-model="loglist.is_blacklist"></el-checkbox> 拉黑</span>
        <el-button type="primary" @click="sumbitLog">确 定</el-button>
        <el-button @click="dialogLogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--分配归属人 -->
    <el-dialog
      title="分配归属人"
      :visible.sync="dialogOwerVisible"
      width="450px"
      @close="closeEvent"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="form"
        size="small"
        label-width="80px"
      >
        <el-form-item label="负责人">
          <el-autocomplete
            v-model="form.owner"
            clearable
            style="width:100%"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sumbitOwer">确 定</el-button>
        <el-button @click="dialogOwerVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <cc-auto-distribution ref="CcAutoDistribution" @change="getList" />
    <import-costomer ref="ImportCostomer" @change="getList" />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import findDetail from "./findDetail.vue";
// import { getCall, subChangeType } from "@/utils/cusMgt/customer";
import { getAllLeader } from "@/api/vadmin/permission/dept";
import moment from "moment";
import { listCustomer, QuickAddCustomer, handleCall,
  getIndustryList, getProfessionList, getPayList, editCustomer,
  addFollowLog, transOwer, exportAllMessage, delCustomer, blockCustomer
} from "@/api/crm/customer.js";
import CcAutoDistribution from "./cc_auto_distribution";
import ImportCostomer from "./import_costomer";
import { transSea } from "../../../api/crm/customer";
// import Cookies from "js-cookie";
import { permi } from "@/utils/permi";
export default {
  components: { findDetail, CcAutoDistribution, ImportCostomer },
  props: {
    category: {
      type: String,
      require: true
    },
    list_type: {
      type: String,
      require: true
    },
    scope: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      column: "姓名",
      dialogTitle: true,
      sourceList: [],
      dynamicTags: [],
      temp_dynamicTags: [],
      postList: [],
      leaderList: [],
      professionList: [],
      payList: [],
      bankList: [],
      areaList: [],
      industryList: [],
      isDisabled: true,
      form: {
        owner: "",
        category: "",
        customer_ids: []
      },
      dateRange: "",
      statusOptions: [], // 客户状态
      // 婚姻
      ldlist: [
        { value: "已婚", label: "已婚" },
        { value: "未婚", label: "未婚" },
        { value: "离异", label: "离异" },
        { value: "丧偶", label: "丧偶" }
      ],
      // 用户导入参数
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin/system/savefile/"
      },
      options: [{
        value: "1",
        label: "客户状态"
      }, {
        value: "2",
        label: "客户级别"
      },
      {
        value: "3",
        label: "跟进时间"
      },
      {
        value: "4",
        label: "职业"
      },
      {
        value: "5",
        label: "所属行业"
      },
      {
        value: "6",
        label: "婚姻状况"
      },
      {
        value: "7",
        label: "发薪方式"
      }
      ],
      title: "",
      searchValue: "",
      loading: false,
      forced: false,
      del_id: "",
      dialogLogVisible: false,
      dialogDelVisible: false,
      dialogOwerVisible: false,
      dialogStatusVisible: false,
      dialogVisible: false,
      dialogSearch: false,
      dialogChangeVisible: false,
      dialogTypeVisible: false,
      // 总条数
      total: 10,
      // 添加客户
      temp: {
        category: "",
        status: "",
        customer: "",
        name: "",
        phone: "",
        source: "",
        owner: "",
        type: "",
        star: "",
        is_focused: null,
        next_follow_datetime: "",
        required_load_amount: "",
        recent_follow_log: "",
        memo: ""
      },
      // 跟进记录
      loglist: {
        customer: "",
        next_follow_datetime: "",
        content: "",
        is_archived: false,
        is_blacklist: false
      },
      star: null,
      // 查询参数
      queryParams: {
        dateRange: "",
        pageNum: 1,
        pageSize: 10,
        status: undefined,
        star: "",
        search: "",
        profession_category: "",
        industry: "",
        pay_method: "",
        marital_status: "",
        utime__gt: "",
        utime__lt: "",
        scope: "",
        clue: ""
      },
      searchMap: {

      },
      rules: {
        name: [
          { required: true, message: "请输入内容", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
            message: "姓名格式不正确, 请输入中文或者英文"
          }
        ],
        type: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入内容", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
            message: "电话号码格式不正确, 请输入重新输入"
          }
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: "最近一周",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", [start, end]);
          }
        }, {
          text: "最近一个月",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit("pick", [start, end]);
          }
        }, {
          text: "最近三个月",
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit("pick", [start, end]);
          }
        }]
      }
    };
  },

  computed: {
    ...mapGetters(["clue"]),
    searchOptions() {
      if (this.category === "CC") {
        return this.options.filter(item => {
          return item.value !== "1";
        });
      }
      return this.options;
    },
    permi,
    categoryPermi() {
      return this.permi[this.category.toLowerCase()];
    }
  },
  watch: {
    clue(val) {
      this.queryParams.clue = val;
      this.getList();
    }
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.form.category = this.category;
      // this.queryParams.category = this.category;
      this.temp.category = this.category;
      if (this.category === "CC") {
        this.queryParams.scope = this.scope;
        if (this.list_type === "distrcus") {
          this.queryParams.utime__gt = moment().add(-3, "days").format("YYYY-MM-DD HH:mm:ss");
        } else if (this.list_type === "mycus") {
          this.queryParams.is_archived = true;
        } else if (this.list_type === "not3daycus") {
          this.queryParams.utime__lt = moment().add(-3, "days").format("YYYY-MM-DD HH:mm:ss");
        } else if (this.list_type === "todayusecus") {
          this.queryParams.is_current_lftime = true;
        } else if (this.list_type === "todayneedcus") {
          this.queryParams.is_current_nftime = true;
        } else if (this.list_type === "subcus") {
          this.queryParams.is_archived = true;
        }
      } else {
        this.queryParams.scope = this.list_type;
      }
      this.getList();
    },
    // 关注客户
    clickFocuesd(row) {
      // console.log("row.is_focuse", row.is_focused);
      this.temp.customer = row.id;
      const focused = !row.is_focused ? "true" : "false";
      this.temp.is_focused = focused;
      // console.log("focused", focused);
      this.editCustomer();
    },
    // 双击编辑
    singeEdit(row, column) {
      this.column = column;
      this.temp.customer = row.id;
      this.temp.name = row.name;
      this.temp.memo = row.memo;
      this.temp.phone = row.phone;
      if (column === "客户状态") {
        this.customerStatus();
      }
      if (column === "客户归属人") {
        this.getAllLeader();
        this.form.customer_ids.push(row.id);
      }
      this.dialogTypeVisible = true;
    },
    // 确定更改
    subtransSea() {
      if (this.column === "客户归属人") {
        this.sumbitOwer();
        this.dialogTypeVisible = false;
      } else {
        this.editCustomer();
        this.dialogTypeVisible = false;
      }
    },
    // 删除
    handleDelete(row) {
      this.dialogDelVisible = true;
      this.del_id = row.id;
    },
    subDelete() {
      delCustomer(this.del_id, this.forced, this.category).then(res => {
        this.$message.success("删除成功");
        this.dialogDelVisible = false;
        this.getList();
      });
    },
    // 拉黑
    handleBlock(row) {
      this.$confirm("是否确拉黑客户?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        blockCustomer(row.id, this.category).then(res => {
          if (res.code === 200) {
            this.$message.success("客户已拉黑");
            this.getList();
          }
        });
      });
    },
    // 打电话
    handleCall(row) {
      // getCall(row.id);
      handleCall(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success("呼叫成功");
          this.handleFollowLog(row);
        } else {
          this.$message.error("呼叫失败: " + res.message);
        }
      });
    },
    // 日期选择
    changeTime() {
      if (this.dateRange) {
        this.queryParams.utime__gt = this.dateRange[0];
        this.queryParams.utime__lt = this.dateRange[1];
      } else {
        this.queryParams.utime__gt = "";
        this.queryParams.utime__lt = "";
      }
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (selection.length > 0) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
      this.form.customer_ids = [];
      selection.forEach(item => {
        this.form.customer_ids.push(item.id);
      });
    },
    // 高级搜索
    handleSearch() {
      this.dialogSearch = true;
      this.customerStatus();
      this.getIndustryList();
      this.getPayList();
      this.getProfessionList();
    },
    handleSelectType() {
      this.reset();
    },
    selectCondition() {
      if (this.searchValue && this.queryParams.status) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.status;
      }
      if (this.searchValue && this.queryParams.star) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.star;
      }
      if (this.searchValue && this.queryParams.dateRange) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.dateRange;
      }
      if (this.searchValue && this.queryParams.industry) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.industry;
      }
      if (this.searchValue && this.queryParams.pay_method) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.pay_method;
      }
      if (this.searchValue && this.queryParams.profession_category) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.profession_category;
      }
      if (this.searchValue && this.queryParams.marital_status) {
        this.searchMap[this.searchValue] = this.searchValue + ": " + this.queryParams.marital_status;
      }
      const tags = [];
      for (const key in this.searchMap) {
        tags.push(this.searchMap[key]);
      }
      this.dynamicTags = tags;
    },
    // 高级搜索条件
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      for (const key in this.searchMap) {
        if (this.searchMap[key] === tag) {
          this.$delete(this.searchMap, key);
        }
      }
      if (this.dynamicTags.length === 0) {
        this.reset();
        this.dynamicTags = [];
        this.searchMap = {};
      }
    },
    // 确定高级搜索
    subSearch() {
      if (this.dynamicTags.length > 0) {
        this.temp_dynamicTags = this.dynamicTags;
        this.dynamicTags.forEach(item => {
          if (item.indexOf("客户状态") !== -1) {
            this.statusOptions.forEach(ele => {
              if (item.indexOf(ele.dictLabel) !== -1) {
                this.queryParams.status = ele.dictValue;
              }
            });
          }

          if (item.indexOf("跟进时间") !== -1) {
            if (this.queryParams.dateRange) {
              this.queryParams.utime__gt = this.queryParams.dateRange[0];
              this.queryParams.utime__lt = this.queryParams.dateRange[1];
            } else {
              this.queryParams.utime__gt = "";
              this.queryParams.utime__lt = "";
            }
          }
          console.log(item.indexOf("职业"));
          if (item.indexOf("职业") !== -1) {
            this.professionList.forEach(ele => {
              if (item.indexOf(ele.dictLabel) !== -1) {
                this.queryParams.profession_category = ele.dictValue;
              }
            });
          }
          if (item.indexOf("所属行业") !== -1) {
            this.industryList.forEach(ele => {
              if (item.indexOf(ele.dictLabel) !== -1) {
                this.queryParams.industry = ele.dictValue;
              }
            });
          }
          if (item.indexOf("婚姻状况") !== -1) {
            this.ldlist.forEach(ele => {
              if (item.indexOf(ele.label) !== -1) {
                this.queryParams.marital_status = ele.value;
              }
            });
          }
          if (item.indexOf("发薪方式") !== -1) {
            this.payList.forEach(ele => {
              if (item.indexOf(ele.dictLabel) !== -1) {
                this.queryParams.pay_method = ele.dictValue;
              }
            });
          }
        });
        this.dialogSearch = false;
        this.getList();
      } else {
        this.$message.warning("请选择搜索条件");
      }
      Object.assign(this.queryParams, this.$options.data().queryParams);
    },
    // 清空高级搜索条件
    handleClear() {
      this.dynamicTags = [];
      this.searchMap = {};
      this.temp_dynamicTags = [];
      Object.assign(this.queryParams, this.$options.data().queryParams);
      this.getList();
    },
    clearSelect() {
      this.searchValue = "";
      this.dynamicTags = [];
      this.searchMap = {};
      this.dialogSearch = false;
    },
    // 添加客户
    handleAdd() {
      this.dialogTitle = true;
      this.dialogVisible = true;
      this.getSource();
    },
    // 编辑客户
    handleEdit(row) {
      this.dialogTitle = false;
      this.dialogVisible = true;
      this.getSource();
      this.temp.customer = row.id;
      this.temp.name = row.name;
      this.temp.memo = row.memo;
      this.temp.phone = row.phone;
      this.temp.source = row.source;
      this.temp.type = row.type;
      this.temp.star = row.star;
      this.temp.is_focused = row.is_focused;
      this.temp.next_follow_datetime = row.next_follow_datetime;
      this.temp.required_load_amount = row.required_load_amount;
    },
    // 确定客户
    sumbit() {
      this.temp.is_focused = this.temp.is_focused ? "true" : "false";
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.dialogTitle) {
            QuickAddCustomer(this.temp, this.category).then(res => {
              if (res.code === 200) {
                this.queryParams.pageNum = 1;
                this.dialogVisible = false;
                this.getList();
                this.$message.success("添加成功");
              } else {
                this.$message.error("创建失败: " + res.message);
              }
            });
          } else {
            this.editCustomer();
          }
        }
      });
    },
    // 编辑客户
    editCustomer() {
      editCustomer(this.temp, this.category).then(res => {
        if (res.code === 200) {
          this.queryParams.pageNum = 1;
          this.dialogVisible = false;
          this.getList();
          this.$message.success("操作成功");
        } else {
          this.$message.error("创建失败: " + res.message);
        }
      });
    },
    // 添加更进记录
    handleFollowLog(row) {
      this.loglist.customer = row.id;
      this.dialogLogVisible = true;
    },
    // 确定添加记录
    sumbitLog() {
      const { content } = this.loglist;
      if (content === "") {
        this.$message.warning("请输跟进内容");
        return;
      }
      addFollowLog(this.loglist, this.category).then(res => {
        this.dialogLogVisible = false;
        if (res.code === 200) {
          this.dialogLogVisible = false;
          this.$message.success("添加成功");
        } else {
          this.$message.error("创建失败: " + res.message);
        }
      });
    },
    // 分配归属人
    changeOwser(row) {
      this.form.customer_ids.push(row.id);
      this.getAllLeader();
      this.dialogOwerVisible = true;
    },
    sumbitOwer() {
      transOwer(this.form, this.category).then(res => {
        if (res.code === 200) {
          this.dialogOwerVisible = false;
          this.getList();
          this.$message.success("操作成功");
        } else {
          this.$message.error("创建失败: " + res.message);
        }
      });
    },
    // 更改类型
    changetransSea() {
      this.dialogChangeVisible = true;
    },
    // 确认更改
    subChange(category) {
      this.form.category = category;
      transSea(this.form, this.category).then(response => {
        if (response.code === 200) {
          this.getList();
          this.dialogChangeVisible = false;
        }
      });
    },
    // 查询负责人
    querySearch(queryString, cb) {
      var leaderList = this.leaderList;
      var results = queryString ? leaderList.filter(this.createFilter(queryString)) : leaderList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 获取所有负责人
    getAllLeader() {
      getAllLeader().then(res => {
        res.data.forEach(item => {
          this.leaderList.push({ value: item });
        });
      });
    },

    // 关闭弹框
    closeEvent() {
      this.forced = false;
      this.reset();
      Object.assign(this.temp, this.$options.data().temp);
      Object.assign(this.loglist, this.$options.data().loglist);
    },
    // 重置
    reset() {
      this.temp.name = "";
      this.temp.memo = "";
      this.temp.phone = "";
      this.temp.source = "";
      this.temp.type = "个人客户";
      this.temp.star = "";
      this.temp.is_focused = "";
      this.temp.next_follow_datetime = "";
      this.temp.required_load_amount = "";
      this.queryParams.star = "";
      this.queryParams.dateRange = "";
      this.form.customer_ids = [];
      this.form.owner = "";
      this.temp.recent_follow_log = "";
      this.loglist.content = "";
      this.queryParams.status = "";
      this.queryParams.pay_method = "";
      this.queryParams.industry = "";
      this.queryParams.profession_category = "";
      this.queryParams.marital_status = "";
      this.form.category = "";
      this.form.customer_ids = [];
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].resetFields();
      }
    },
    // 查看详情
    findDetail(row) {
      this.$refs.findDetail.open(row);
    },
    /** 查询客户列表 */
    getList() {
      this.loading = true;
      listCustomer(this.queryParams, this.category).then(response => {
        this.postList = response.data.results;
        this.total = response.data.count;
        this.loading = false;
      });
    },
    // 客户来源
    getSource() {
      this.getDicts("crm_customer_source").then(response => {
        this.sourceList = response.data;
      });
    },
    // 客户状态
    customerStatus() {
      const query = "crm_" + this.category.toLowerCase() + "_customer_status";
      this.getDicts(query).then(response => {
        this.statusOptions = response.data;
      });
    },
    // 获取职业
    getProfessionList() {
      getProfessionList().then(res => {
        this.professionList = res.data;
      });
    },
    // 获取行业
    getIndustryList() {
      getIndustryList().then(res => {
        this.industryList = res.data;
      });
    },
    // getPayList
    getPayList() {
      getPayList().then(res => {
        this.payList = res.data;
      });
    },

    /** 全部导出按钮操作 */
    handleAllExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return exportAllMessage(queryParams, this.category);
      }).then(response => {
        this.download(response.data.file_url, response.data.name);
      });
    },
    // 线索池导入和自动分配
    handleImport() {
      this.$refs["ImportCostomer"].open();
    },
    handleAutoDistribution() {
      this.$refs["CcAutoDistribution"].open();
    }
  }

};

</script>

<style lang="scss"  scoped>
.follow_style{
  border: 1px solid #dfe1e6;
  padding: 5px 10px;
  ::v-deep .el-textarea__inner{
    border: none !important;
    padding: 20px 8px;
  }
}
.select_option{
    font-size: 14px;
  ._option{
    padding: 10px 8px;
    margin-left: 8px;
    font-weight: 500;
    line-height: 32px;
    border-radius: 3px;
    background: #f4f5f7;
    border: 1px solid transparent;
    color: #344563;
  }
}
.search_high{
  .search_title{
   padding: 8px 2px;
  }
  ::v-deep .el-dialog__body{
    padding: 16px 20px 0 ;
  }
 .el-form-item--small.el-form-item{
   margin-bottom: 0;
 }
}
.selection_conditions{
  .el-tag--medium{
    margin-left: 6px;
    margin-bottom: 6px;
  }
}
.follow_log{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

.el-dropdown-menu--medium .el-dropdown-menu__item{
  font-size: 12px;
}
.file_style{
  ::v-deep .el-upload-dragger{
    width: 412px !important;
  }
}
.close_style{
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
  .app_container1 ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 12px;
  }
  .app_container1 ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow   : inset 0 0 2px rgba(0, 0, 0, 0.2);
      background-color: #dfe1e6;
  }
  .app_container1 ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background   : #fff;
  }
</style>
